<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <button>设置</button>
    <button>获取</button>
    <button>删除</button>
    <button>清空</button>
    <script>
        // 2-sessionStorage:
        // 3-localStorage：
        //   特点： 
        //     容量大： 5M-20M  只能存储字符串     
        //     操作简单: 
        //       setItem(k, v);
        //       getItem(k);
        //       removeItem(k);
        //       clear();
        var btns = document.querySelectorAll("button");
        // 添加
        btns[0].onclick = function () {
            // localStorage.setItem("name", "zzjyr");
            // localStorage.setItem("age", 1);
            // localStorage.setItem("sex", "female");
            sessionStorage.setItem("name", "zzjyr");
            sessionStorage.setItem("age", 1);
            sessionStorage.setItem("sex", "female");
        }
        // 获取
        btns[1].onclick = function () {
            // localStorage.getItem("name");
            // localStorage.getItem("age");
            // localStorage.getItem("sex");
            // getItem只能传一个参数
            // alert(sessionStorage.getItem("name", "age", "sex")); 不行
            alert(sessionStorage.getItem("name"));
            sessionStorage.getItem("age");
            sessionStorage.getItem("sex");
        }
        // 删除
        btns[2].onclick = function () {
            // localStorage.removeItem("sex");
            sessionStorage.removeItem("age");
        }
        // 清空
        btns[3].onclick = function () {
            // localStorage.clear();
            sessionStorage.clear();
        }
    </script>
</body>

</html>